<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表：</title>
</head>
<body>


<div>
    <h3>课程列表：</h3></h3>
    <table border="1px solid black" >
    </table>
</div>
<div>
    <h3>在刷课程：</h3></h3>
    <table border="1px solid black" >
    </table>
</div>


<div>
    <h3>个人信息：</h3></h3>
    <table border="1px solid black" >
        <tr>
            <th>姓名</th>
            <th>学号</th>
        </tr>
    </table>
</div>

<div>
    <div style="border: 1px solid black">
        <input type="text" id="courseId"  placeholder="请输入网课ID">
        <input type="text" id="sign" placeholder="请输入通行代码">
        <button onclick="go()">提交</button>
    </div>
</div>
<script>
    var courseList = [];
    // 获取课程列表
    sendRequest("GET",'/course', {} , function (res){
        courseList =  res.data.list
        var courseListHtml = "<tr>\n" +
            "            <th>课程ID</th>\n" +
            "        <td>课程名称</td>\n" +
            "        <td>截止时间</td>\n" +
            "        <td>进度</td>\n" +
            "    </tr>";
        for (var i = 0; i < courseList.length; i++) {
            courseListHtml += "<tr>";
            courseListHtml += "<td>" + courseList[i].id + "</td>";
            courseListHtml += "<td>" + courseList[i].name + "</td>";
            courseListHtml += "<td>" + courseList[i].endDate + "</td>";
            courseListHtml += "<td>" + courseList[i].progress1 + "</td>";
            courseListHtml += "</tr>";
        }
        document.getElementsByTagName("table")[0].innerHTML = courseListHtml;
    })

    sendRequest("GET",'/getMyProcess', {} , function (res){
        var courseListHtml = "<tr>\n" +
            "            <th>课程ID</th>\n " +
            "</tr>";
        for (var i = 0; i < res.data.list.length; i++) {
            courseListHtml += "<tr>";
            courseListHtml += "<td>" + res.data.list[i] + "</td>";
        }
        var infoHtml = " <tr>\n" +
            "            <th>"+res.data.userInfo.name+"</th>\n " +
            "<th>"+res.data.userInfo.number+"</th>\n " +
            "</tr>"

        document.getElementsByTagName("table")[2].innerHTML += infoHtml;
        document.getElementsByTagName("table")[1].innerHTML = courseListHtml;
        if (res.data.list.length == 0) {
            document.getElementsByTagName("table")[1].innerHTML = "<tr><td>暂未开始服务</td></tr>";
        }

    })

    function sendRequest(method, url, data, callback) {
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(data);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let res = JSON.parse(xhr.responseText);
                callback(res)
            }
        }
    }

    function go() {
        let courseId = document.getElementById("courseId").value;
        let sign = document.getElementById("sign").value;
        if (courseId == "" || sign == "") {
            alert("请输入完整信息")
            return;
        }
        sendRequest("POST",'/start', JSON.stringify({courseId:courseId,sign:sign}), function (res){
            alert(res.msg)
            location.reload()
        })
    }
</script>
</body>
</html>